<template>
    <div>
        <div>{{ msg }}</div>
        <p>{{ username }}</p>
        <p>{{ password }}</p>
        <button @click="handleClick">触发 abc 事件</button>
        <button @click="emitParent">触发 parent 事件</button>

        <Sun />
    </div>
</template>

<script>
import Sun from './Sun';
export default {
    components: {
        Sun,
    },
    props: {
        msg: {
            type: String,
            required: true,
        },
    },
    data() {
        return {
            username: '',
            password: '',
        };
    },
    methods: {
        handleClick() {
            this.$emit('abc', '触发 abc 事件');
        },
        emitParent() {
            this.$parent.$emit(
                'parent',
                '触发 parent 事件',
                '触发 parent 事件',
                '触发 parent 事件',
                '触发 parent 事件'
            );
        },
    },
};
</script>
